<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../static/base.css">
    <link rel="stylesheet" href="../static/font/iconfont.css">
    <link rel="stylesheet" href="css/setting.css">
    <script src="../renderlib/vue/vue.js"></script>
    <script src="../renderlib/vue/components/btn.js"></script>
    <script src="../renderlib/vue/components/dialog.js"></script>
    <script src="../renderlib/vue/components/system-title.js"></script>
    <script src="../static/font/iconfont.js"></script>
    <script src="../renderlib/sass/render.js"></script>
   
</head>
<body>
    <div class="frame" id="root">
        <system-title @beforeclose="closeEvent"></system-title>
        <div class="content">
            <div class="left-bar">
                <div class="left-bar-item" @click="content='base'" :class="{actived: isContent('base')}">基础配置</div>
                <div class="left-bar-item" @click="content='directories'" :class="{actived: isContent('directories')}">目录配置</div>
            </div>
            <div class="right-content">
                <div class="content-body">
                    <template v-if="isContent('base')">
                        <div class="content-group">
                            <h1>主窗口设置</h1>
                            <div class="group-body">
                                <div class="line"><label><span>失去焦点时不隐藏</span>
                                    <input type="checkbox" v-model="setting.base.nohide"></label>
                                </div>
                                <div class="line"><label><span>开机自动启动</span></label>
                                    <img class="loading-img" src="../static/img/loading.png" @click.prevent v-if="status.autoStart == STATUS.AUTOSTART_CHECKING">
                                    <template v-if="status.autoStart == STATUS.AUTOSTART_UNSET">
                                        <span style="color:gray;">未设置</span>
                                    </template>
                                    <template v-if="status.autoStart == STATUS.AUTOSTART_YES">
                                        <span style="color:green;">已设置</span>
                                    </template>
                                    <template v-if="status.autoStart == STATUS.AUTOSTART_CHECKING">
                                        <span style="color:black;">正在检查...</span>
                                    </template>
                                    <template v-if="status.autoStart == STATUS.AUTOSTART_ERR">
                                        <span style="color:red;">检查出错</span>
                                    </template>
                                    <template v-if="status.autoStart != STATUS.AUTOSTART_CHECKING">
                                        &nbsp;
                                        <btn size="s" @click="checkAutoStart">检查</btn>&nbsp;
                                        <btn size="s" v-if="status.autoStart == STATUS.AUTOSTART_UNSET" @click="setAutoStart">设置为开机自动启动</btn>
                                        <btn size="s" v-if="status.autoStart == STATUS.AUTOSTART_YES" @click="unsetAutoStart">取消开机自动启动</btn>
                                    </template>
                                </div>
                            </div>
                        </div>
                    </template>
                    <template v-if="isContent('directories')">
                        <div class="content-group">
                            <h1>目录设置</h1>
                            <div class="group-body">
                                <table class="directories" ref="directoryTable">
                                    <thead>
                                        <tr>
                                            <th>目录</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tr v-if="setting.directories.length==0">
                                        <td><i>无内容</i></td>
                                        <td class="opera">
                                        </td>
                                    </tr>
                                    <tr v-else v-for="(dir, index) in setting.directories">
                                        <td>
                                            <div class="val-col">
                                                <span class="col-left">路径</span> 
                                                <span class="col-right path">{{dir.path}}</span>
                                            </div>
                                            <div class="val-col">
                                                <span class="col-left">搜索深度</span>
                                                <span class="col-right">{{directoryDepthLabel[dir.depth]}}</span>
                                            </div>
                                            <div> 
                                                <span class="smblock allow" v-for="(extname, i) in splitExtnames(dir.allow_extnames)">{{extname}}</span> 
                                                <span class="smblock ignore" v-for="(extname, i) in splitExtnames(dir.ignore_extnames)">{{extname}}</span> 
                                            </div>
                                        </td>
                                        <td class="opera">
                                            <btn size="xs" @click="editDirectory(index, dir)">
                                                <i class="iconfont icon-edit" title="编辑"></i>
                                            </btn>
                                            <btn theme="red" size="xs" @click="$delete(setting.directories, index)">
                                                <i class="iconfont icon-delete" title="删除"></i>
                                            </btn>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <btn @click="editDirectory()">新增</btn>
                                        </td>
                                        <td class="opera">
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </template>
                </div>
                <div class="button-bar">
                    <div>
                        <btn @click="close">取消</btn>&nbsp;
                        <btn theme="primary" class="apply" :disabled="!settingChanged" @click="applySetting">应用</btn>&nbsp;
                        <btn theme="primary" class="save" :disabled="!settingChanged" @click="save">保存</btn>
                    </div>
                </div>
            </div>
    
            <dlg class="dlg-add-directory" ref="dlgAddDirectory"
                 cancelText="取消" :title="(dlg.newDirectory.index===null?'添加':'编辑') + '目录'">
                <table>
                    <tr>
                        <td>路径</td>
                        <td><textarea name="" cols="30" rows="10" v-model="dlg.newDirectory.path"></textarea></td>
                        <td><btn @click="dlg.newDirectory.path = choiceDirectory()">选择目录</btn></td>
                    </tr>
                    
                    <tr>
                        <td>搜索深度</td>
                        <td>
                            <select name="" v-model="dlg.newDirectory.depth">
                                <option :value="value" v-for="(label, value) in directoryDepthLabel">{{label}}</option>
                            </select>
                        </td>
                        <td>
                            <btn theme="none" class="helper-btn" title="搜索的目录深度">?</btn>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>文件后缀</td>
                        <td>
                            <textarea v-model="dlg.newDirectory.allow_extnames"></textarea>
                        </td>
                        <td>
                            <btn theme="none" class="helper-btn" title="后缀必须以.开头, 例如 .svn &#10;多个后缀可以由一下字符分隔: 空格,|,逗号,换行等">?</btn>
                        </td>
                    </tr>
    
                    <tr>
                        <td>忽略后缀</td>
                        <td>
                            <textarea v-model="dlg.newDirectory.ignore_extnames"></textarea>
                        </td>
                        <td>
                            <btn theme="none" class="helper-btn" title="后缀必须以.开头, 例如 .svn &#10;多个后缀可以由一下字符分隔: 空格,|,逗号,换行等">?</btn>
                        </td>
                    </tr>
                </table>
                
                <template slot="buttons">
                    <btn theme="primary" @click="saveDirectory">确定</btn>
                </template>
            </dlg>
        </div>
    </div>

<script src="./js/setting.js"></script>
</body>
</html>
